<template>
<div>
<!--  //头部-->
  <el-form
      :inline="true"
      :model="ruleForm"
      class="advanced-form"
      label-position="right"
  >
    <el-row :gutter="20" class="form-row">
      <!-- 第一行 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
        <el-form-item label="姓名" class="form-item">
          <el-input
              v-model="ruleForm.ownerName"
              placeholder="请输入真实姓名"
              clearable
              class="form-input"
              @focus="handleFocus($event)"
              @blur="handleBlur($event)"
          />
        </el-form-item>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
        <el-form-item label="" class="form-item">
          <el-input
              v-model="ruleForm.areaMin"
              placeholder="请输入最小面积"
              clearable
              class="form-input"
              @focus="handleFocus($event)"
              @blur="handleBlur($event)"
          >
            <template #append>亩</template>
          </el-input>
        </el-form-item>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
        <el-form-item label="" class="form-item">
          <el-input
              v-model="ruleForm.areaMax"
              placeholder="请输入最大面积"
              clearable
              class="form-input"
              @focus="handleFocus($event)"
              @blur="handleBlur($event)"
          >
            <template #append>亩</template>
          </el-input>
        </el-form-item>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
        <el-form-item label="用途" class="form-item">
          <el-input
              v-model="ruleForm.used"
              placeholder="请输入土地用途"
              clearable
              class="form-input"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 操作按钮（单独一行） -->
    <el-row>
      <el-col :span="24" class="form-actions">
        <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
      </el-col>
    </el-row>
  </el-form>

  <!--  列表页  -->
  <el-table :data="tableData"
            style="width: 100%"
            :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
            stripe
            highlight-current-row
            @current-change="toShow"
            border
  >
      <el-table-column prop="ownerName" label="管理者" width="180" align="center"  ></el-table-column>
      <el-table-column prop="ownerPhone" label="手机号" width="180" align="center" ></el-table-column>
      <el-table-column prop="area" label="土地面积" width="180" align="center" />
      <el-table-column prop="used" label="利用状况" width="180" align="center" >
        <template slot-scope="scope">
          {{ scope.row.used || '未填写' }}
        </template>
      </el-table-column>
      <el-table-column prop="startUsageDate" label="开始使用时间" width="220" align="center" >
        <template slot-scope="scope">
          {{ scope.row.startUsageDate ? scope.row.startUsageDate.split('T')[0] : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="endUsageDate" label="结束使用时间" width="220" align="center" >
        <template slot-scope="scope">
          {{ scope.row.endUsageDate ? scope.row.endUsageDate.split('T')[0] : '-' }}
        </template>
      </el-table-column>

  </el-table>

  <!--    页脚-->
  <el-pagination
      background
      :page-size="pageSize"
      :current-page="pageNum"
      :page-count="pages"
      layout="prev, pager, next"
      :total="total"
      @current-change="changePageNum"
  >
  </el-pagination>

<!--  详细信息弹窗-->
  <el-dialog
      title="土地信息"
      :visible.sync="showDialog"
      width="680px"
      :close-on-click-modal="false"
      class="land-dialog"
  >
    <!-- 表单改为展示区域 -->
    <div class="display-form">
      <el-row :gutter="20">
        <!-- 第一列 -->
        <el-col :span="12">
          <!-- 基本信息 -->
          <div class="form-section">
            <h4 class="section-title">基本信息</h4>

            <div class="display-item">
              <div class="display-label">土地面积（亩）</div>
              <div class="display-value">{{ form.area || '-' }}</div>
            </div>

            <div class="display-item">
              <div class="display-label">使用用途</div>
              <div class="display-value">{{ form.used || '-' }}</div>
            </div>

            <div class="display-item">
              <div class="display-label">开始日期</div>
              <div class="display-value">{{ form.startUsageDate ? form.startUsageDate.split('T')[0]: '-' }}</div>
            </div>

            <div class="display-item">
              <div class="display-label">结束日期</div>
              <div class="display-value">{{ form.endUsageDate || '-' }}</div>
            </div>
          </div>
        </el-col>
        <!-- 第二列 -->
        <el-col :span="12">
          <!-- 地理信息 -->
          <div class="form-section">
            <h4 class="section-title">地理信息</h4>

            <div class="display-item">
              <div class="display-label">土壤类型</div>
              <div class="display-value">
                {{
                  form.soilType === 'sandy' ? '砂土' :
                      form.soilType === 'loam' ? '壤土' :
                          form.soilType === 'clay' ? '黏土' :
                              '-'
                }}
              </div>
            </div>

            <div class="display-item">
              <div class="display-label">地理位置</div>
              <div class="display-value">{{ form.location || '-' }}</div>
            </div>

            <div class="display-item">
              <div class="display-label">气候条件</div>
              <div class="display-value">{{ form.climateCondition || '-' }}</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 灌溉条件 -->
      <div class="form-section full-width">
        <h4 class="section-title">灌溉条件</h4>
        <div class="display-item">
          <div class="display-value">{{ form.irrigationCondition || '-' }}</div>
        </div>
      </div>
    </div>

    <!-- 关闭按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button size="medium" type="primary" @click="showDialog = false">关闭</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>

  import {getLandPage} from "@/api/land";

  export default {
    name:"LandInfo",
    data(){
      return{
        //土地列表数据
        tableData: [],
        //页数转换相关
        pages: 0,
        total: 1,
        pageNum: 1,
        pageSize:6,
        //筛选信息
        ruleForm: {
          ownerName:"",
          areaMin:"",
          areaMax:"",
          used:""
        },
        //弹窗 默认值
        showDialog: false,
        //表单
        form:{
          ownerId:"",
          area:"",
          used:"",
          startUsageDate:"",
          endUsageDate:"",
          soilType:"",
          location:"",
          climateCondition:"",
          irrigationCondition:""
        },
      }
    },
    methods:{
      toShow(val){
        this.showDialog = true
        this.form = val
      },

      getPage() {
        getLandPage(this.ruleForm,this.pageNum,this.pageSize).then((res) =>{
          console.log(res)
          if(res.code == 200){
            this.tableData = res.data.list
            this.pages = res.data.pages
            this.total = res.data.total
            this.pageNum = res.data.pageNum
            this.pageSize = res.data.pageSize
          }
        })

      },

      //查询函数
      onSubmit(){
        this.pageNum =1
        this.getPage()
      },

      //直接选择第几页
      changePageNum(v){
        console.log(v+'')
        this.pageNum = v
        this.getPage()
      },

    },
    created() {
      this.getPage()
    }
  }

</script>

<style scoped>

/* 表单行样式 */
.form-row {
  margin-bottom: 15px;
}

/* 表单列样式 */
.form-col {
  margin-bottom: 10px;
  padding: 0 10px;
}

/* 表单项样式 */
.form-item {
  margin-bottom: 0;
}

/* 输入框样式 */
.form-input {
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .form-col {
    padding: 0 5px;
  }
}

/* 添加展示样式 */
.display-form {
  padding: 10px;
}

.form-section {
  margin-bottom: 20px;
}

.section-title {
  margin: 0 0 15px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  color: #333;
  font-size: 16px;
}

.display-item {
  margin-bottom: 15px;
}

.display-label {
  color: #999;
  font-size: 12px;
  margin-bottom: 5px;
}

.display-value {
  padding: 8px 10px;
  background: #f5f7fa;
  border-radius: 4px;
  min-height: 20px;
  word-break: break-word;
}

.form-actions {
  text-align: right;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
  margin-top: 10px;
}
</style>